#left-panel {
  height: var(--main-height);
  width: calc(240px + 1px);
  border-right: 1px solid var(--border-color);
  background-color: var(--left-panel-color);
  ul {
    cursor: pointer;
    width: 100%;
    li {
      display: block;
      width: 100%;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      color: var(--bold-text);
      padding-left: 48px;
      transition: background-color var(--animation-time) var(--ease-in-out);
      &.active {
        background-color: var(--left-panel-active-color);
      }
      &:hover {
        background-color: var(--left-panel-hover-color);
      }
      &::before {
        font-family: 'iconfont' !important;
        position: absolute;
        left: 0;
        width: 48px;
        height: 48px;
        text-align: center;
        font-size: 18px;
        line-height: 48px;
        color: var(--icon-color);
      }
      &[data-target='resourcepackPage']::before {
        content: '';
      }
      &[data-target='extensionPage']::before {
        content: '';
        font-size: 16px;
      }
      &[data-target='toolPage']::before {
        content: '';
        font-size: 18px;
      }
      &[data-target='settingPage']::before {
        content: '';
        font-size: 18px;
      }
      &[data-target='aboutPage']::before {
        content: '';
      }
    }
  }
}
